<template>
  <el-form label-position="right" class="msg-model" label-width="80px">
    <div class="mod-title">通知模板</div>
    <el-form-item label="通知标题" v-if="hasTitle" required>
      <bs-input v-model="formData.a" placeholder="请输入通知标题"></bs-input>
    </el-form-item>
    <el-form-item label="通知内容" required>
      <bs-input v-model="formData.b" type="textarea" placeholder="请输入通知内容"></bs-input>
    </el-form-item>
    <div class="mod-title">恢复模板</div>
    <el-form-item label="通知标题" v-if="hasTitle" required>
      <bs-input v-model="formData.c" placeholder="请输入通知标题"></bs-input>
    </el-form-item>
    <el-form-item label="通知内容" required>
      <bs-input v-model="formData.d" type="textarea" placeholder="请输入通知内容"></bs-input>
    </el-form-item>
  </el-form>
</template>
<script lang="ts" setup>
import {ref} from 'vue'

defineProps({
  hasTitle: Boolean
})

const formData = ref<Record<string, any>>({})
</script>
<style lang="scss" scoped>
  .mod-title {
    margin-bottom: 8px;
  }
  .msg-model {
    :deep(.el-form-item) {
      display: flex;
    }
  }
</style>